import React, {useRef,useState} from 'react';
import {Card, Descriptions} from 'antd';
import {GridContent} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {getAttendMonth} from '../service';

const Attendance = ({code}) => {
  const actionRef = useRef();
  const [info,setInfo] = useState({});
  const columns = [
    {
      title: '查询时间',
      hideInTable: true,
      dataIndex: 'date',
      valueType: 'dateRange'
    },
    {
      title: '序号',
      render: (text, record, index) => `${index + 1}`,
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '日期',
      hideInSearch: true,
      dataIndex: 'beldate',
      align: 'center',
    },
    {
      title: '工号',
      hideInSearch: true,
      dataIndex: 'code',
      align: 'center',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '公司名称',
      hideInSearch: true,
      dataIndex: 'orgname',
      align: 'center',
    },
    {
      title: '部门',
      hideInSearch: true,
      dataIndex: 'unitname',
      align: 'center',
    },
    {
      title: '上班时间',
      dataIndex: 'startAm',
      align: 'center',
      hideInSearch: true,
      onCell: (record) => {
        if (record.startAm === null) {
          return {
            style: {
              color: 'red'
            }
          }
        }
      },
      render: (text) => {
        if (text === '-') {
          return '缺卡';
        }
        return text;
      },
    },
    {
      title: '下午下班时间',
      dataIndex: 'endPm',
      hideInSearch: true,
      align: 'center',
      onCell: (record) => {
        if (record.endPm === null) {
          return {
            style: {
              color: 'red'
            }
          }
        }
      },
      render: (text) => {
        if (text === '-') {
          return '缺卡';
        }
        return text;
      },
    },
  ];
  return (
    <>
      <GridContent>
        <ProTable
          actionRef={actionRef}
          rowKey="beldate"
          style={{marginBottom: 24}}
          request={(params) => getAttendMonth(params, code).then(res => {
            setInfo(res.data.attendMonthDto);
            return {data : res.data.dtoList}
          })}
          columns={columns}
          headerTitle="打卡记录"
          // tableExtraRender={(_, data) => (
          //   <Card title="考勤信息" style={{marginBottom: 24}} bordered={false}>
          //     <Descriptions>
          //       <Descriptions.Item label="应到天数">{info && info.ycqDays ? info.ycqDays : '暂无'}</Descriptions.Item>
          //       <Descriptions.Item label="实到天数">{info && info.cqDays ? info.cqDays : '暂无'}</Descriptions.Item>
          //       <Descriptions.Item label="请假天数">{info && info.qjDays ? info.qjDays : '暂无'}</Descriptions.Item>
          //       <Descriptions.Item label="迟到次数">{info && info.cdCs ? info.cdCs : '暂无'}</Descriptions.Item>
          //       <Descriptions.Item label="早退次数">{info && info.ztCs ? info.ztCs : '暂无'}</Descriptions.Item>
          //       <Descriptions.Item label="旷工天数">{info && info.kgDays ? info.kgDays : '暂无'}</Descriptions.Item>
          //       <Descriptions.Item label="补卡次数">{info && info.bkCs ? info.bkCs : '暂无'}</Descriptions.Item>
          //       <Descriptions.Item label="加班天数">{info && info.ycqDays ? info.tmaddDays : '暂无'}</Descriptions.Item>
          //     </Descriptions>
          //   </Card>
          // )}
        />
      </GridContent>
    </>
  );
};
export default Attendance;
